<%= include ic/admin-header.html %>

<div class="am-cf admin-main">
  <%= include ic/admin-sidebar.html %>

  <!-- content start -->
  <div class="admin-content">

    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">图片</strong> / <small>Image</small></div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-5">
        <div class="am-btn-toolbar">
          <div class="am-btn-group am-btn-group-xs">
            <button type="button" class="am-btn am-btn-success"  onclick="setAll('open')"><span class="am-icon-check-circle-o"></span> 恢复</button>
            <button type="button" class="am-btn am-btn-danger"  onclick="setAll('ban')"><span class="am-icon-ban"></span> 禁用</button>
            <button type="button" class="am-btn am-btn-default" onclick="removeAll()"><span class="am-icon-trash-o"></span> 删除</button>
          </div>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-4">
        <div class="am-form-group am-input-group-xs am-fl">
          <select id="param-isSys" data-am-selected="{btnSize: 'sm'}">
            <option value="all" <% if(typeof(param['isSys'])!="boolean"){ %>selected<% } %>>全部</option>
            <option value=false  <% if(typeof(param['isSys'])=="boolean" && param['isSys']==false){ %>selected<% } %>>用户图片</option>
            <option value=true  <% if(typeof(param['isSys'])=="boolean" && param['isSys']==true){ %>selected<% } %>>系统图片</option>
          </select>
        </div>
        <div class="am-form-group am-input-group-xs am-fl">
          <select id="param-enabled" data-am-selected="{btnSize: 'sm'}">
            <option value="all" <% if(typeof(param['enabled'])!="boolean"){ %>selected<% } %>>全部状态</option>
            <option value=false  <% if(typeof(param['enabled'])=="boolean" && param['enabled']==false){ %>selected<% } %>>已禁用</option>
            <option value=true  <% if(typeof(param['enabled'])=="boolean" && param['enabled']==true){ %>selected<% } %>>正常</option>
          </select>
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-3">
        <div class="am-input-group am-input-group-xs am-fl">
          <input id="param-search" type="text" class="am-form-field">
          <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button" onclick="goSearch('search')" >搜索</button>
          </span>
        </div>
      </div>
    </div>

	<ul class="am-avg-sm-2 am-avg-md-4 am-avg-lg-6 am-margin gallery-list">
		<% for(var i=0;i<results.length;i++){ %>
		<li objectId="<%= results[i].id %>" onclick="select(this)">
			<img class="am-img-thumbnail am-img-bdrs" src="/p?id=<%= results[i].id %>&w=300&h=300" alt="" style="cursor:pointer;" />
      <%if(!results[i].get('enabled')){ %><span class="am-badge am-radius am-badge-danger"><i class="am-icon-ban"></i></span><% } %>
      <%if(results[i].get('isSys')==true){ %><span class="am-badge am-radius am-badge-secondary"><i class="am-icon-cog"></i></span><% } %>
      <div class="gallery-id">ID:<%=results[i].id %></div>
			<div class="gallery-title" style="font-weight:800"><%if(results[i].get('name')){ %><%= results[i].get('name') %><% } %></div>
			<div class="gallery-desc" style="color:#ccc;"><%= moment(results[i].createdAt).zone(-8).format('YYYY年MM月DD日 HH:mm:ss') %></div>
      <div>
        <span class="am-badge am-radius am-badge-primary am-fl" style="margin-right:2px;"><%= results[i].get('clicks') %></span>
        <span class="am-badge am-radius am-badge-warning am-fl"><%= results[i].get('likes') %></span>
        <a href="/image/detail?id=<%= results[i].id %>" target="_blank"><span class="am-badge am-radius am-badge-warning am-fr" style="cursor:pointer;">Detail</span></a>
      </div>
		</li>
		<% } %>
    </ul>
    <div class="am-u-sm-12">
		<hr/>
		<%= include ic/admin-pager.html %>
    </div>
  </div>
  <!-- content end -->
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<style>
.am-btn-toolbar button{margin-right:5px;}
.gallery-list li{overflow:hidden;border:1px #fff solid;position:relative;}
.gallery-list li .am-badge-danger{position:absolute;top:18px;right:18px;}
.gallery-list li .am-badge-secondary{position:absolute;top:18px;left:18px;}
.gallery-list .gallery-title{overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.gallery-list .c{background:#eee;}
</style>
<%= include ic/admin-footer.html %>
<script type="text/javascript">
var param       = {},enabledReady=false,sysReady=false;
$(function() {
	$("#collapse-nav").addClass("am-in");
  <% for(var key in param){ %>
    <% if(typeof(param[key])=="string"){ %>
    param['<%= key %>']="<%= param[key] %>";
    <% }else{ %>
    param['<%= key %>']=<%= param[key] %>;
    <% } %>
  <% } %>
  $("#param-enabled").change(function(){
    if(enabledReady){
      goSearch("enabled");
    }else{
      enabledReady=true;
    }
  });
  $("#param-isSys").change(function(){
    if(sysReady){
      goSearch("isSys");
    }else{
      sysReady=true;
    }
  });
});
function select(obj){
  if($(obj).is(".c")){
    $(obj).removeClass("c");
  }else{
    $(obj).addClass("c");
  }
}
function goSearch(type){
  var url         = window.location.href;
  var arr         = url.split('?');
  var basicurl    = arr[0]+"?";
  var val         = $("#param-"+type).val();
  var urlParam    = "<%- urlParam %>";
  if(urlParam.indexOf(type+"=")==-1){
    //console.log(basicurl+"&"+type+"="+val);
    window.location.href=basicurl+"&"+type+"="+val;
  }else{
    window.location.href=basicurl
      +urlParam.replace(type+"="+param[type],type+"="+val);
  }
}

function getIds(){
  //console.dir($(".gallery-list .li.c"));
  return $(".gallery-list li.c").map(function(n,obj){
    //console.log($(obj).html());
    return $(obj).attr("objectId");
  }).get().join(',');
}

function removeAll(){
  var ids=getIds();
  if(ids.length==0){
    mAlert({
      title:"错误",
      text:"未选择操作对象",
      onConfirm:function(e) {}
    });
  }else{
    var $Confirm = $("#my-confirm");
  	var $confirmBtn = $Confirm.find('[data-am-modal-confirm]');
  	$confirmBtn.one('click', function() {
  		$.post("delete", { "ids": ids,"ajax":true },function(data){
  			if(data){
  				if(data && data.success){
            window.location.href=window.location.href;
  				}else{
  					mAlert({
  						title:"错误",
  						text:data.error
  					});
  				}
  			}else{
  				mAlert({
  					title:"错误",
  					text:"操作失败！"
  				});
  			}
  		}, "json");
  	});

  	$Confirm.find(".text").text("你确定要删除这些数据吗？");
  	if($Confirm.is(".am-modal-out")){
  		$Confirm.modal('open');
  	}else{
  		$Confirm.modal({relatedTarget: this});
  	}
  }
}

function setAll(type){
  var ids=getIds();
  if(ids.length==0){
    mAlert({
      title:"错误",
      text:"未选择操作对象",
      onConfirm:function(e) {}
    });
  }else{
    var $Confirm = $("#my-confirm");
  	var $confirmBtn = $Confirm.find('[data-am-modal-confirm]');
  	$confirmBtn.one('click', function() {
  		$.post("set", { "ids": ids,"ajax":true,type:type },function(data){
  			if(data){
  				if(data && data.success){
            window.location.href=window.location.href;
  				}else{
  					mAlert({
  						title:"错误",
  						text:data.error
  					});
  				}
  			}else{
  				mAlert({
  					title:"错误",
  					text:"操作失败！"
  				});
  			}
  		}, "json");
  	});

    if(type=="open"){
      $Confirm.find(".text").text("你确定要恢复这些数据吗？");
    }else if(type=="ban"){
      $Confirm.find(".text").text("你确定要禁用这些数据吗？");
    }

  	if($Confirm.is(".am-modal-out")){
  		$Confirm.modal('open');
  	}else{
  		$Confirm.modal({relatedTarget: this});
  	}
  }
}
</script>
